﻿@model IndignadoFramework.BackOffice.Models.MovimientoModel
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
    ViewBag.Title = "Modificar Movimiento";
}
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/CategoriasTematicas.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/OrigenesDeDatos.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/SubirImagenesMovimiento.js")"></script>
<script type="text/javascript">
	var ubicacion = new google.maps.LatLng(@Model.MovimientoUbicacionX, @Model.MovimientoUbicacionY);
	var marker;
	var map;
	var geocoder;

	window.onload = function (e) {
	var mapOptions = {
		zoom: 13,
		mapTypeId: google.maps.MapTypeId.ROADMAP,
		center: ubicacion
	};

	geocoder = new google.maps.Geocoder();
	map = new google.maps.Map(document.getElementById("map_canvas"),
			mapOptions);
		  
	marker = new google.maps.Marker({
		map:map,
		draggable:true,
		animation: google.maps.Animation.DROP,
		position: ubicacion
	});

	document.getElementById("punto1").value =  ubicacion.lat();
	document.getElementById("punto2").value = ubicacion.lng();
	
	google.maps.event.addListener(map, 'click',  function(event){
		var newLatLng = new google.maps.LatLng(event.latLng.lat(), event.latLng.lng());
		marker.setPosition(newLatLng);
		map.panTo(newLatLng);
		document.getElementById("punto1").value =  event.latLng.lat();
		document.getElementById("punto2").value = event.latLng.lng();
		}
	);

	google.maps.event.addListener(marker, 'mouseup', function(event){
		document.getElementById("punto1").value =  event.latLng.lat();
		document.getElementById("punto2").value = event.latLng.lng();
		map.panTo(event.latLng);
		});
	}

	function codeAddress() {
		var address = document.getElementById("address").value;
		geocoder.geocode( { 'address': address}, function(results, status) {
		if (status == google.maps.GeocoderStatus.OK) {
		map.setCenter(results[0].geometry.location);
			var newLatLng = results[0].geometry.location;
			marker.setPosition(newLatLng);
			document.getElementById("punto1").value =  newLatLng.lat();
			document.getElementById("punto2").value = newLatLng.lng();
		  } else {
			alert("No se ha encontrado la dirección");
		  }
		});
	}
</script>
<h2 id="titulo">
    Modificar Movimiento
</h2>
@using (Html.BeginForm("ModificarMovimiento", "Movimiento", FormMethod.Post, new { enctype = "multipart/form-data", id = "movimiento" }))
{
    <div id="contenedorPrincipalMovimiento">
        <h2>
            Información General</h2>
        <div id="contenedorMovimiento">
            <fieldset id="inputs">
                <input type="hidden" name="Id" value="@Model.Id"/>
                <label for="nombre-movimiento">
                    Nombre:</label>
                <input type="text" name="MovimientoNombre" size=1 placeholder="Nombre del movimiento" value="@Model.MovimientoNombre" />
                <br />
                <input id="punto1" type="hidden" name="MovimientoUbicacionX" value="0" />
                <input id="punto2" type="hidden" name="MovimientoUbicacionY" value="0" />
                <label for="descripcion">
                    Descripcion:</label>
                <input type="text" name="MovimientoDescripcion" placeholder="Describa el movimiento" value="@Model.MovimientoDescripcion" />
                <br />
                <label for="descripcion">
                    Logo:</label>
                <input name="MovimientoLogo" type="file" />
                <br />
                <label for="descripcion">
                    Estilo CSS:</label>
                <input id="inputs" name="MovimientoEstiloCSS" type="file" />
                <br />
                <label for="constante-M">
                    Constante M:</label>
                <input type="number" name="MovimientoConstM" value="@Model.MovimientoConstM"/>
                <br />
                <label for="constante-N">
                    Constante N:</label>
                <input type="number" name="MovimientoConstN" value="@Model.MovimientoConstN"/>
                <br />
                <label for="constante-X">
                    Constante X:</label>
                <input type="number" name="MovimientoConstX" value="@Model.MovimientoConstX"/>
                <br />
                <label for="constante-Z">
                    Constante Z:</label>
                <input type="number" name="MovimientoConstZ" value="@Model.MovimientoConstZ"/>
                <br />
                <label for="host">
                    Host:</label>
                <input type="text" name="MovimientoHost" placeholder="Host del movimiento" value="@Model.MovimientoHost"/>
                <br />
            </fieldset>
        </div>
        <div id="contenedorMapa">
            <div id="busquedamapa">
                Dirección:
                <input id="address" type="text" value="">
                <input type="button" value="Buscar" onclick="codeAddress()">
            </div>
            <div id="map_canvas">
                map div</div>
        </div>
    </div>

    <div id="categoriaTematica">
        <input id="cantidadCategoriaTematica" type="hidden" name="cantidadCategoriaTematica"
            value="0">
        <h2>
            Categoría Temática</h2>
        <input type="button" value="Agregar Categoría Temática" onclick="crearCategoria(this)">
        <div id="inputsCategoria">
        </div>
    </div>

    <div id="galeriaimagenes">
        <input id="cantidadimagenes" type="hidden" name="cantidadimagenes" value="0">
        <h2>
            Galería de Imagenes</h2>
        <input type="button" value="Agregar Imagen" onclick="crear(this)">
        <div id="inputsImagenes">
        </div>
    </div>
	
    <div id="contenedorOrigenesDeDatos">
        <input id="cantidadOrigenes" type="hidden" name="cantidadOrigenes" value="0">
        <h2>
            Origenes de Datos</h2>
        <input type="button" value="Agregar Origen de Dato" onclick="crearOrigen(this)">
        <div id="listaOrigenes">
        </div>
    </div>
    <div id="submitMovimiento">
        <input id="submit" type="submit" value="Confirmar" />
    </div>
}
